<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="3" :xs="24">
        <Tree style="margin-left: 20px;" :showCheckbox="true" @projectSelect="handleProjectClick"></Tree>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="26">
        <el-row :gutter="10" class="mb8">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="设备名称" prop="userName">
              <el-input v-model="wsName" placeholder="请输入设备名称/设备地址码" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <div class="text" v-loading="loading">
          <el-card class="box-card" v-for="(item, index) in devList" :key="item.id">
            <div slot="header" class="clearfix">
              <span>{{ item.deptName }}-{{ item.deviceName }}-{{ item.deviceId }} 当前状态：{{ item.status }}</span>
            </div>
            <div class="card">
              <div class="item dust">
                <div class="ico"><img src="@/assets/icons/PM2.5.png" alt=""></div>
                <div class="fr">
                  <div class="concrete">{{ item.pmTwoFive }}</div>
                  <div class="label">PM2.5 </div>
                </div>
              </div>
              <div class="item dust">
                <div class="ico"><img src="@/assets/icons/PM10.png" alt=""></div>
                <div class="fr">
                  <div class="concrete">{{ item.pmTen }}</div>
                  <div class="label">PM10 </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { listDevice } from "../../../api/system/device"
import Tree from "@/components/Tree/Tree";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getInfo } from "../../../api/login";
export default {
  name: "User",
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  components: { Treeselect, Tree },
  data() {
    return {
      wsName: "",
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备数据
      devList: [],
      flag: 0,
      //当前选择的deptid
      deptId:'',
      socket: null,
      SocketList: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      selectedDevIds: [],
      filterList: []
    };
  },
  created() {
    getInfo().then((res) => {
      console.log('部门id:',res)
      const ws_url = `${process.env.VUE_APP_WS_URL}/websocket/message?deptId=` + res.user.deptId
      this.Socket(ws_url)
    })
  },
  methods: {
    Socket(url) {
      this.loading=true
      if (this.socket) {
        this.socket.close()
      }
      this.socket = new WebSocket(url)
      this.socket.onopen = () => {
        console.log('WebSocket 连接已打开');
        // this.socket.send(deptId,'101')
      };
      this.socket.onmessage = (event) => {
        let eventData=JSON.parse(event.data)
        console.log('收到 WebSocket 消息',eventData.type);
        if(eventData.type==0){
          console.log('收到 WebSocket 11消息',eventData);
          this.filterList = eventData.data;
          this.flag++
        
        if (this.flag == 1) {
          this.devList = this.filterList
        }else{
          this.filterData()
        }
        this.loading=false
      } 
      };
      this.socket.onerror = (error) => {
        console.error('WebSocket 错误:', error);
      };
      this.socket.onclose = () => {
        console.log('WebSocket 连接已关闭');
      };
    },

    handleProjectClick(node, expanded) {
      this.deptId = node.id
      // 展开显示数据
      if (expanded) {
        this.filterData()
      } else {
        this.devList = []
      }
    },

    //筛选数据
    filterData(){
      if(this.deptId!=''){
        this.devList = this.filterList.filter(item => item.deptId === this.deptId)
      }
    },
    handleQuery() {
      let searchTerm = this.wsName.toLowerCase(); // 转换为小写以进行不区分大小写的搜索
      this.devList = this.filterList.filter(item => {
        let deviceNameMatch = item.deviceName.toLowerCase().includes(searchTerm);
        let deviceIdMatch = item.deviceId.toString().includes(searchTerm);
        return deviceNameMatch || deviceIdMatch; // 两者之一匹配即可
      });

    },
    /**刷新按钮操作 */
    handleRefresh() {
      this.userList = []
      this.$refs.tree.setCurrentKey(null);
      this.$refs.tree.setCheckedNodes([]);
      this.Socket()

    },
  },
  beforeDestroy() {
    this.socket.close()
  }
};
</script>
<style>
.box-card {
  margin-bottom: 10px;
}

.box-card .card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
}

.box-card .card .dust {
  width: 110px;
  height: 60px;
  font-size: 14px;
  margin-right: 20px;
  margin-bottom: 5px;
}

.box-card .card .dust .ico {
  float: left;
  height: 100%;
  width: 30px;
  line-height: 60px;
}

.box-card .card .dust .ico img {
  width: 100%;
  height: 50%;
}

.box-card .card .fr {
  float: left;
  height: 100%;
  width: 70px;

  text-align: center;
}

.box-card .card .dust .concrete {
  height: 50%;
  font-size: 16px;
  font-weight: 600;
}

.box-card .card .dust .label {
  height: 50%;
  font-size: 14px;

}
</style>
